<template>
  <view class="play-container">
    <view class="cover_image">
      <video id="videoId" :src="playUrl" @play="onPlayVideo"></video>
    </view>
    <view class="introduction">
      <view class="title-and-info">
        <text class="title">{{ course_detail.course.title }}</text>
        <view class="info">
          <text>{{ course_detail.course.study_count }}人学过</text>
          <text>难度:{{ difficult }}</text>
          <text>时长:{{ course_detail.course.course_duration }}</text>
        </view>
      </view>
      <view class="comment" @click="toComment">
        <image src="/static/images/evaluate@2x.png" />
      </view>
    </view>
    <view class="course-progress">
      <text class="title">课程进度</text>
      <view class="catelog-container">
        <view
          class="course-item"
          v-for="(item, index) in course_detail.videos"
          :key="index"
          @click="isPlaying(index, item)"
        >
          <!-- 左边的序号和标题 -->
          <text :class="playIndex === index ? 'active' : ''"
            >{{ index + 1 }}.{{ item.name }}</text
          >
          <!-- 右边的时长或是已完成  is_study是1的话，代表学习了，如果是0 代表没有学习 -->
          <text
            :class="[
              item.is_study === 0 ? 'time' : 'studied',
              playIndex === index ? 'active' : '',
            ]"
            >{{ item.is_study === 0 ? item.duration : "已学习" }}</text
          >
        </view>
      </view>
    </view>
    <!-- 评价弹出框 -->
    <van-dialog
      use-slot
      closeOnClickOverlay
      :show="show"
      show-cancel-button
      @close="onClose"
      @confirm="onConfirm"
    >
      <van-cell-group>
        <van-field
          :value="message"
          @input="changeValue"
          type="textarea"
          placeholder="请输入评价内容"
          :autosize="{ maxHeight: 200, minHeight: 100 }"
          border
        />
        <view>
          <text style="margin: 0 30rpx">评分：</text>
          <van-rate
            :value="value"
            color="#ffa871"
            void-color="#ffa871"
            @change="onChange"
          />
        </view>
      </van-cell-group>
    </van-dialog>
  </view>
</template>
<script>
import request from "@/utils/request.js";
export default {
  data() {
    return {
      course_id: null,
      course_detail: null,
      playIndex: 0,
      playUrl: null,
      isplayRight: false, // 播放权限
      show: false, // 显示弹出框
      message: "", // 评论内容
      value: "", // 评价星级
    };
  },
  onLoad(options) {
    this.course_id = options.id;
    this.getPlayCourseData();
  },
  computed: {
    difficult() {
      // 加上判断，否则报错course不存在
      if (!this.course_detail) return;
      let level = "初级";
      if (this.course_detail.course.level === 1) {
        level = "初级";
      } else if (this.course_detail.course.level === 2) {
        level = "中级";
      } else {
        level = "高级";
      }
      return level;
    },
  },
  methods: {
    async getPlayCourseData() {
      const res = await request({ url: "course/play/" + this.course_id });
      // console.log(res, 11111);
      if (res.data.status === 0) {
        this.course_detail = res.data.message;
        // 默认显示第一个视频
        this.playUrl = res.data.message.videos[0].video_url;
      }
    },
    // 点击视频播放
    async isPlaying(index, item) {
      this.playIndex = index;
      // 查看是否有播放权限
      const res = await this.isPlayRight();
      // 并且显示模拟框提示支付
      if (!res) {
        uni.showModal({
          title: "提示",
          content: "您还没有支付，请先支付后，再来观看",
          confirmText: "去支付",
          confirmColor: "#fe8c44",
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: `/pages/pay/index?id=${this.course_id}
                &title=${this.course_detail.course.title}
                 &price=${this.course_detail.course.price}
                 &cover_image_url=${this.course_detail.course.cover_image_url}`,
              });
              //   console.log("用户点击确定");
            } else if (res.cancel) {
              //   console.log("用户点击取消");
            }
          },
        });
        return;
      }
      // 有权限就播放
      this.playUrl = item.video_url;
      // 点击让视频自动播放  使用这个方法要先定义一个id
      setTimeout(() => {
        uni.createVideoContext("videoId").play();
      }, 200);
      // 记录学习进度
      this.recordStudyProgress(item);
    },
    // 记录学习进度
    async recordStudyProgress(item) {
      // console.log(item);
      // 优化  如果已经学习了就不要发送请求，减少服务器压力
      if (item.is_study === 1) return;
      const res = await request({
        url: "study/video",
        method: "POST",
        data: {
          course_id: this.course_id,
          video_id: item.id,
        },
      });
      // console.log(res);
      if (res.data.status === 0) {
        item.is_study = 1;
      }
    },
    // 监听视频是否正在播放
    async onPlayVideo() {
      // 没有播放
      if (!this.isplayRight) {
        // 查看是否有播放权限
        const isCanPlay = await this.isPlayRight();
        // 没有权限就不播放,并且提示模拟框框
        if (!isCanPlay) {
          uni.createVideoContext("videoId").pause();
          uni.showModal({
            title: "提示",
            content: "您还没有支付，请先支付后，再来观看",
            confirmText: "去支付",
            confirmColor: "#fe8c44",
            success: (res) => {
              if (res.confirm) {
                uni.navigateTo({
                  url: `/pages/pay/index?id=${this.course_id}
                &title=${this.course_detail.course.title}
                 &price=${this.course_detail.course.price}
                 &cover_image_url=${this.course_detail.course.cover_image_url}`,
                });
                //   console.log("用户点击确定");
              } else if (res.cancel) {
                //   console.log("用户点击取消");
              }
            },
          });
          return;
        }
      }
    },
    // 查看是否有播放权限
    async isPlayRight() {
      const res = await request({
        url: "order/paystatus",
        data: {
          course_id: this.course_id,
        },
      });
      //   console.log(res);
      if (res.data.pay_status === 0) {
        return Promise.resolve(false);
      } else {
        this.isplayRight = true;
        return Promise.resolve(true);
      }
    },
    // 评论
    async toComment() {
      const res = await request({
        url: "study/complete",
        data: { course_id: this.course_id },
      });
      // console.log(res, 123);
      // 未学习完显示提示框去学习
      if (!res.data.complete) {
        uni.showModal({
          title: "评论失败",
          content: "需要学习完课程内容才能评价哦~",
          showCancel: false,
          confirmColor: "#ffa871",
          success: function (res) {
            if (res.confirm) {
              console.log("用户点击确定");
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
        return;
      }
      //  学习完显示评论弹出框
      this.show = true;
    },
    // 弹出框关闭时触发
    onClose() {
      this.show = false;
    },
    // 监听评论内容值改变时
    changeValue(e) {
      // console.log(e.detail);
      this.message = e.detail;
    },
    // 监听评分值改变时
    onChange(e) {
      // console.log(this.value, e);
      this.value = e.detail;
    },
    // 点击弹出框确认按钮
    async onConfirm(e) {
      // console.log(e, this.message);
      const res = await request({
        url: "comment/create",
        method: "POST",
        data: {
          course_id: this.course_id,
          content: this.message,
          score: this.value,
        },
      });
      console.log(res);
      if (res.data.status === 0) {
        uni.showToast({
          title: res.data.message,
          icon: "none",
          duration: 200,
        });
      }
    },
  },
};
</script>
<style lang='less' scoped>
.play-container {
  background-color: #efefef;
  position: relative;
  .cover_image {
    width: 750rpx;
    height: 434rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 750rpx;
      height: 434rpx;
    }
    video {
      width: 750rpx;
      height: 434rpx;
    }
  }
  .introduction {
    z-index: 3;
    position: absolute;
    margin-top: -10rpx;
    border-radius: 16px 16px 0px 0px;
    border-bottom: 1px solid #f5f5f5;
    left: 0;
    right: 0;
    height: 192rpx;
    background-color: #ffffff;
    padding: 38rpx 32rpx;
    display: flex;
    align-items: center;
    .title-and-info {
      flex: 1;
      .title {
        color: #343434;
        font-size: 24px;
        font-weight: bold;
      }
      .info {
        margin-top: 12rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #818181;
        font-size: 12px;
        display: block;
        text {
          padding-right: 15rpx;
        }
        text:nth-child(2),
        text:nth-child(3) {
          padding-left: 15rpx;
        }
        text:nth-child(2) {
          position: relative;
          &::before {
            position: absolute;
            content: "";
            background-color: #ebebeb;
            left: 0rpx;
            width: 1px;
            top: 8rpx;
            height: 20rpx;
          }
          &::after {
            position: absolute;
            content: "";
            background-color: #ebebeb;
            right: 0rpx;
            width: 1px;
            top: 8rpx;
            height: 20rpx;
          }
        }
      }
    }
    .comment {
      margin-top: 32rpx;
      image {
        width: 198rpx;
        height: 80rpx;
      }
    }
  }
  .course-progress {
    margin-top: 222rpx;
    padding: 44rpx 32rpx;
    background-color: #fff;
    .title {
      color: #343434;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 800;
    }
    .catelog-container {
      .course-item {
        display: flex;
        justify-content: space-between;
      }
      text {
        color: #636363;
        font-size: 30rpx;
        height: 80rpx;
        line-height: 80rpx;
      }
      .studied {
        float: right;
        margin-top: 16rpx;
        font-size: 10px;
        text-align: center;
        color: #aaaaaa;
        background-color: #f5f5f5;
        border-radius: 12rpx;
        width: 98rpx;
        height: 48rpx;
        line-height: 48rpx;
      }
      .time {
        float: right;
      }
      .active {
        color: #ff5e00;
      }
    }
  }
}
.comment-content {
  label {
    width: 100rpx;
  }
  textarea {
    width: 100%;
    height: 200rpx;
  }
}
</style>